<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        使用组件的三个步骤：
            1.创建组件
                1)使用Vue.extend(options)创建，options配置对象和new Vue里面基本相同，但也有点区别：
                    区别如下：
                        1).el不要写 ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。（可以放置在任意地方使用）
                        2).data必须写成函数 ———— 避免组件被复用时，数据存在引用关系。（防止一个地方的数据改变影响其它地方的数据）
                    备注：使用template可以配置组件结构
                2)const school = Vue.extend(options) 可以简写为 const school = {options}
            2.注册组件
                有局部注册和全局注册，但是不论是哪一种注册，都要先创建组件（先声明）
                可以使用name配置项指定组件在开发者工具中呈现的名字
            3.使用组件标签
     -->

    <!-- 
        组件的命名规范：
            1个单词：推荐使用第二种，首字母大写，方便和vue开发工具统一起来
                1):school.vue
                2):School.vue
            多个单词：推荐使用第二种，首字母大写（大驼峰写法），方便和vue开发工具统一起来
                1):my-school.vue
                2):MySchool.vue
     -->
    <div id="root">
        <!-- 第三步：使用组件 -->
        <school></school>
        <student></student>
        <!-- 报错 -->
        <!-- <ggg></ggg> -->
    </div>

    <div id="root2">
        <ggg></ggg>
    </div>

    <script>
        Vue.config.productionTip = false;

        // 第一步：创建school组件，这里的名字并不是组件真正的名字
        const school = Vue.extend({
            // 使用templat配置组件的结构，最好使用模板字符串
            // 要在外面套一层根元素，且只能有1个根元素
            template: `
                <div>
                    <h2>学校名称：{{ schoolName }}</h2>
                    <h2>学校地址：{{ address }}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            },
        }) 

        // 第一步：创建学生组件，这里的名字并不是组件真正的名字
        const student = Vue.extend({
            template:`
                <div>
                  <h2>学生姓名：{{studentName}}</h2>
                  <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        }) 

        new Vue({
            el: "#root",
            data: {
                
            },
            methods: {
                
            },
            // 第二步：注册局部组件
            components: {
                // 复杂写法:第一个是真正在模板中使用的名字，第二个是在上面创建组件时声明的名字
                // school: school,
                // student: student
                // 简写：因为2个名字相同，所以可以简写
                school,
                student

            }

        });

        // 另一种方法（全局注册）：先创建组件，后全局注册，最后使用组件标签
        // 1.创建组件
        // const hello = Vue.extend({
        //     // 可以使用name配置项指定组件在开发者工具中呈现的名字
        //     name: 'hhh',
        //     // 需要且只需要1个根标签
        //     template:`
        //         <div>
        //             <h2>你好，{{ name }}</h2>
        //         </div>
        //     `,
        //     data() {
        //         return {
        //             name: 'Tom'
        //         }
        //     }
        // })
        
        // 可以简写为对象的形式
        const hello = {
            // 可以使用name配置项指定组件在开发者工具中呈现的名字
            name: 'hhh',
            // 需要且只需要1个根标签
            template:`
                <div>
                    <h2>你好，{{ name }}</h2>
                </div>
            `,
            data() {
                return {
                    name: 'Tom'
                }
            }
        }

        // 2.全局注册:2个参数分别是在模板中使用的名字和上面创建组件时定义（声明）的名字
        Vue.component('ggg', hello);

        // 不知道这里为什么要重新绑定一个新的vue实例对象，不然的话会报错
        new Vue({
            el: "#root2",
        })
    </script>
</body>
</html>